<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow :alpha="alpha">选择地址</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<loading v-if="loading"></loading>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con" v-else>
			<view class="list">
				<view class="list__item" v-for="(item,index) in list" :key="index">
					<view class="list__item__name">
						{{item.username}} {{item.mobile}}
					</view>
					<view class="list__item__addr">
						{{item.province+item.city+item.area+item.detail}}
					</view>
					<view class="tn-flex tn-flex-col-center tn-flex-row-between">
						<view class="tn-flex tn-flex-col-center" @click="chagedefu(item)">
							<view class="list__item__check">
								<image v-if="item.is_default==1" src="/static/my/check.png" class="list__item__check__icon" mode=""></image>
							</view>
							<view class="list__item__deful">
								默认地址
							</view>
						</view>
						<view class="list__item__cz">
							<text @click="deleteaddr(item)">删除</text>   <text style="margin: 0 20rpx;">|</text>   <text @click="to('/pages/my/editaddr?id='+item.id)">编辑</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tn-flex tn-flex-row-center" style="padding: 50rpx;position: fixed;bottom: 0;left: 0;background-color: #F7F6F6;">
			<tn-button fontColor="#FFFFFF" @click="to('/pages/my/addr')" shape='round' width='650rpx' height='100rpx' :fontSize='36'
				backgroundColor="tn-bg-lv" shadow>添加新地址</tn-button>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				alpha: true,
				list:[],
				loading:true
			};
		},
		onShow() {
			this.getlist()
		},
		methods:{
			chagedefu(item){
				user.setDefaultAddress({id:item.id}).then(res=>{
					if(res.data.code==1){
						this.getlist()
					}
				})
			},
			getlist(){
				user.ourAddress().then(res=>{
					if(res.data.code==1){
						this.list=res.data.data
						this.loading=false
					}
				})
			},
			deleteaddr(item){
				let _this=this
				uni.showModal({
					title:'确认要删除改地址？',
					success(r) {
						if(r.confirm){
							user.deleteAddress({id:item.id}).then(res=>{
								if(res.data.code==1){
									uni.showToast({
										title:'删除成功',
										icon:'none'
									})
									_this.getlist()
								}
							})
						}
					}
				})
				
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F6F6;
	}

	.con {
		position: relative;

		.list {
			padding-bottom: 210rpx;
			&__item {
				padding: 43rpx 33rpx 30rpx;
				background-color: #fff;
				margin-top: 20rpx;
				&__name {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 32rpx;
				}

				&__addr {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 25rpx;
					color: #333333;
					line-height: 25rpx;
					margin-top: 25rpx;
					margin-bottom: 60rpx;
				}
				&__check{
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #999999;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&__icon{
						width: 32rpx;
						height: 32rpx;
						// border: 2rpx solid #fff;
					}
				}
				&__deful{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					line-height: 28rpx;
					margin-left: 22rpx;
				}
				&__cz{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					line-height: 28rpx;
				}
			}
		}
	}
</style>